<script setup lang="ts">
import { onBury, track } from "@xmon/bury";
import { BuryConfig } from "@xmon/bury/dist/config";
import { ref } from "vue";
import useStore from "@/store";
const store = useStore();
let buryPayload: BuryConfig | any = ref();
console.log("123", buryPayload);
// 做好配置之后，你可以使用 onBury 来监听事件
// 一旦 你配置过的url加载或关闭了 OR 你监听的api请求发送了 OR 你监听的事件被调用了 OR 你观察的Dom被点击了 => 就会触发在 onBury 中注册的回调函数
onBury((value) => {
  console.log("bury_onBury", value);
  // 下文中 BuryConfig 中会说明 payload 中包含哪些值
  const buryInfo = value.payload;
  store.setPayload(buryInfo);//设置buryinfo
  // 下面是我的埋点回调示例行为，你应当用你的行为代替示例
  const queries = Object.entries(buryInfo)
    .map(([key, value]) => {
      return key + "=" + encodeURI(value);
    })
    .join("&");
  let img = new Image(1, 1);
  // 请将url改成你的后端埋点系统的API
  // img.src = `http://exmapleApi.com/bury?` + queries;
  // 3000ms超时处理
  setTimeout(() => {
    if (img && (!img.complete || !img.naturalWidth)) {
      img.src = "";
    }
  }, 3000);
});
</script>

<template>
  <div>
    <!-- <span v-if="buryPayload.ip!=undefined">{{ buryPayload.ip }}</span>     -->
    <!-- <p v-for="(val, pro) in buryPayload" :key="pro">{{ pro }}:{{ val }}</p> -->
    <router-view />
  </div>
</template>

<style scoped></style>
